<template>
  <div class="bigBox">
    <!-- 搜索 -->
    <div class="search">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="设备编号: ">
          <el-input v-model="Value" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 内容 -->
    <div class="content">
      <!-- 按钮 -->
      <el-row>
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="add"
        >新建</el-button>
        <el-button type="primary" @click="WordDeploy">工单配置</el-button>
      </el-row>
      <!-- 列表 -->
      <!-- 表格 -->
      <el-table :data="roleList">
        <el-table-column type="selection" width="80" />
        <el-table-column
          label="序号"
          align="left"
          type="index"
          width="130"
        />
        <el-table-column
          label="设备编号"
          align="left"
          width="260"
          prop="innerCode"
        />
        <el-table-column
          label="设备型号"
          align="left"
          width="260"
          prop="type.name"
        />
        <el-table-column
          label="详细地址"
          align="left"
          width="260"
          prop="node.name"
        />
        <el-table-column
          label="合作商"
          align="left"
          width="260"
          prop="ownerName"
        />
        <el-table-column
          label="设备状态"
          align="left"
          width="260"
        >
          <template #default="{ row }">
            <span>{{ createType[row.vmStatus] }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180" align="left">
          <template #default="{ row }">
            <a style="color:blue" @click="viewDetails(row)">货道</a>
            <a style="margin-left:18px;color:blue" @click="add(row)">策略</a>
            <a style="margin-left:18px;color:blue" @click="del(row.id)">修改</a>
          </template>
        </el-table-column>
      </el-table>
      <!-- 下面 -->
      <el-row class="bottom">
        <el-col :span="20">
          <div>共{{ areaList.totalCount }}条数据 第{{ areaList.pageIndex }}/{{ areaList.totalPage }}页</div>
        </el-col>
        <el-col :span="4">
          <el-button-group>
            <el-button type="warning" icon="el-icon-arrow-left" :disabled="upShow" @click="up">上一页</el-button>
            <el-button type="warning" style="margin-left:20px;" :disabled="underShow" @click="under">下一页<i class="el-icon-arrow-right el-icon--right" /></el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </div>
    <!-- 货道的弹窗 -->
    <el-dialog
      title="货道设置"
      :visible.sync="dialogVisible"
      width="55%"
      :before-close="handleClose"
    >
      <div class="huodao">
        <div class="title">
          <el-row>
            <el-col :span="20">
              <span>货到行数:</span>
              <span style="margin-left:40px">货到列数:</span>
              <span style="margin-left:40px">货到容量(个):</span>
            </el-col>
            <el-col :span="4"><el-button type="primary">智能排货</el-button></el-col>
          </el-row>
        </div>
        <!-- 列表内容 -->
        <div class="body">
          <el-row>
            <div v-for="(item,index) in goodsList" :key="index" class="frame pic">
              <span class="ic">{{ item.channelCode }}</span>
              <img src="http://lkd2-java.itheima.net/image/product1.png" alt="">
              <!-- <div v-if="item.sku.brandName">{{ item.sku.brandName }}</div> -->
              <div>暂无数据</div>
              <div class="bow">
                <span style="color:#6185ff">添加</span>
                <span style="color:#ff6565">删除</span>
              </div>
            </div>

          </el-row>

        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="goodsSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { searchMachine, addVending } from '@/api'
export default {
  data() {
    return {
      dialogVisible: false, // 货道弹窗
      upShow: false, // 上下按钮禁用状态
      underShow: false, // 上下按钮禁用状态
      Value: '', // 搜索框绑定的值
      roleList: [], // 渲染表格
      areaList: {}, // 完整的信息
      goodsList: [], // 货道详情渲染数据
      wuPic: '…f/7gKJI+RVPZb+bjKfwGFjihtQmXGoAAAAABJRU5ErkJggg==',
      createType: {
        0: '未投放',
        1: '运营',
        3: '撤机'
      }
    }
  },
  created() {
    this.publicFn()
  },
  methods: {
    goodsSure() {
      // 货到的确定
    },
    handleClose() {
      // 货到的关闭方法
      this.dialogVisible = false
    },
    async viewDetails(row) {
      // 货道
      console.log(row)
      this.dialogVisible = true
      const { data } = await addVending(row.innerCode)
      this.goodsList = data
      console.log(data)
    },
    onSubmit() {
    // 查询按钮
      this.publicFn('', '', '', this.Value)
    },
    add() {
      // 新建 添加 按钮
    },
    WordDeploy() {
      // 工单配置按钮
    },
    // 公共调用的方法
    async publicFn(pageIndex, pageSize, status, innerCode) {
      const { data } = await searchMachine({ pageIndex: pageIndex, pageSize: pageSize, status: status, innerCode: innerCode })
      this.areaList = data
      this.roleList = data.currentPageRecords
      if (data.pageIndex <= 1) {
        this.upShow = true
      } else {
        this.upShow = false
      }
      if (data.pageIndex === data.totalPage) {
        this.underShow = true
      } else {
        this.underShow = false
      }
    },
    up() {
      // 上一页
      this.publicFn(+this.areaList.pageIndex - 1, this.areaList.pageSize)
    },
    under() {
      // 下一页
      this.publicFn(+this.areaList.pageIndex + 1, this.areaList.pageSize, '', '')
    }
  }
}
</script>
<style lang="scss" scoped>
  .bigBox {
  padding: 20px;
  .search {
    background-color: #fff;
    padding: 10px;
    padding-bottom: 0px;
  }
}
.content {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;
  }
  .bottom {
  margin-top: 30px;
}
.huodao {
  padding: 20px;
  .title {
    margin-top: -20px;
    // height: 50px;
    padding: 5px;
    border-radius: 7px;
    padding-left: 20px;
    width: 100%;
    background-color: #f3f6fb;
    line-height: 50px;
  }
  .body {
    .pic {
      position: relative;
      margin-bottom: 10px;
      text-align: center;
      margin-top: 10px;
      // padding: 5px;
      margin-left: 20px;
      background-color: #f6f7fb;
      .ic{
  position: absolute;
    top: 10px;
    left: 0px;
    width: 43px;
    height: 23px;
    line-height: 23px;
    background: #829bed;
    border-radius: 0 10px 10px 0;
    font-size: 12px;
    color: #fff;
      }
      img {
        display: inline-block;
        width: 84px;
        height: 78px;
        margin-bottom: 10px;
        object-fit: contain;
      }
    }
    // .pic1{
    //   text-align: center;
    //   margin-top: 10px;
    //   // padding: 5px;
    //   // margin-left: 10px;
    //   background-color: #f6f7fb;
    //   img {
    //     display: inline-block;
    //     width: 84px;
    //     height: 78px;
    //     margin-bottom: 10px;
    //     object-fit: contain;
    //   }
    // }
  }
}
.bow {
  margin-top: 10px;
  height: 50px;
  background-color: #fff;
  span {
    margin: 5px;
    line-height: 50px;
  }
}
.frame {
  display: inline-block;
  width: 172px;
  box-shadow:3px 3px 5px 2px #f3f3f3 ;
}
</style>
